<template>
  <ul class="nav-list">
    <li class="nav-item" :class="{ active: active === '' }"><a href="javascript:;" @click="clickNav()">全部</a></li>
    <template v-if="categories.length">
      <li v-for="item in categories" :key="item.id" class="nav-item" :class="{ active: active === item.id }">
        <a href="javascript:;" @click="clickNav(item)">{{ item.name }}</a>
      </li>
    </template>
  </ul>
</template>

<script>
export default {
  props: {
    data: Array
  },
  data () {
    return {
      active: ''
    }
  },
  computed: {
    categories () {
      return Array.isArray(this.data) ? this.data.filter(({ id, name }) => ({ id, name })) : []
    }
  },
  methods: {
    clickNav (current) {
      if (current == null) {
        this.active = ''
      } else {
        this.active = current.id
      }
      this.$emit('nav-change', this.active)
    }
  }
}
</script>
<style lang="less" scoped>
.nav-title {
  font-size: 20px;
  padding-bottom: 6px;
  color: #eba613;
  padding-left: 10px;
}

.nav-list {
  min-width: 200px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  margin-bottom: 20px;
  border-right: 1px solid #e6e6e6;
}

.nav-item {
  height: 42px;
  line-height: 42px;
  text-align: center;
  padding: 0 16px;
  min-width: 100px;
  color: #000;

  &:first-child {
    border-radius: 10px 0 0 0;
  }

  a {
    display: inherit;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    font-size: 16px;
    color: inherit;
    letter-spacing: 2px;

  }

  &.active {
    color: #eba613;
    border-left: 3px solid #eba613;
    background-color: #eba7131c;
  }
}
</style>
